import { useState, useEffect } from "react";
import { Form, Input, Select, Modal } from "antd";
import { useStore } from "@/store";

const BackModal = ({ visibleBackModal, isAdd, elementsIndex }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();
  const { slideList, currentSlideIndex, updateSlide } = useStore();
  const slideBgTypeWatch = Form.useWatch("sildeBgType", form);

  useEffect(() => {
    // 当visibleCodeModal为true时，设置modalVisible为true
    if (visibleBackModal) {
      setModalVisible(true);
      const soloValue = slideList?.[currentSlideIndex - 1] || {};
      if (soloValue) {
        form.setFieldsValue({
          sildeBgType: soloValue?.sildeBgType || "color",
          sildeBgVal: soloValue?.sildeBgVal,
          sildeBgVal2: soloValue?.sildeBgVal2,
        });
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visibleBackModal]);

  // 处理取消按钮的点击事件
  const handleCancel = () => {
    form.resetFields();
    setModalVisible(false);
  };

  const handleOK = () => {
    form.validateFields().then((values) => {
      const newSlideList = [...slideList];
      newSlideList[currentSlideIndex - 1].sildeBgType = values?.sildeBgType;
      newSlideList[currentSlideIndex - 1].sildeBgVal = values?.sildeBgVal;
      newSlideList[currentSlideIndex - 1].sildeBgVal2 = values?.sildeBgVal2;
      updateSlide(newSlideList);
      setModalVisible(false);
    });
  };

  return (
    <Modal
      width={500}
      title={"设置代码"}
      open={modalVisible}
      onCancel={handleCancel}
      onOk={handleOK}
      okText="确定"
      cancelText="取消"
    >
      {/* // 表单组件 */}
      <Form
        // 表单标签宽度
        labelCol={{ span: 6 }}
        // 表单实例
        form={form}
        // 表单初始值
        initialValues={{
          sildeBgType: "color",
          sildeBgVal: "",
          sildeBgVal2: "",
        }}
      >
        <Form.Item
          label="背景类型"
          name="sildeBgType"
          rules={[{ required: true, message: "不得为空" }]}
        >
          <Select
            style={{ width: "100%" }}
            options={[
              { label: "颜色", value: "color" },
              { label: "渐变", value: "gradient" },
              { label: "图像", value: "img" },
            ]}
          />
        </Form.Item>
        {slideBgTypeWatch === "color" && (
          <Form.Item
            label="颜色"
            name="sildeBgVal"
            rules={[{ required: true, message: "不得为空" }]}
          >
            <Input style={{ width: "100%" }} />
          </Form.Item>
        )}
        {slideBgTypeWatch === "img" && (
          <Form.Item
            label="图像地址"
            name="sildeBgVal"
            rules={[{ required: true, message: "不得为空" }]}
          >
            <Input style={{ width: "100%" }} />
          </Form.Item>
        )}
        {slideBgTypeWatch === "gradient" && (
          <>
            <Form.Item
              label="渐变开始颜色"
              name="sildeBgVal"
              rules={[{ required: true, message: "不得为空" }]}
            >
              <Input style={{ width: "100%" }} />
            </Form.Item>
            <Form.Item
              label="渐变结束颜色"
              name="sildeBgVal2"
              rules={[{ required: true, message: "不得为空" }]}
            >
              <Input style={{ width: "100%" }} />
            </Form.Item>
          </>
        )}
      </Form>
    </Modal>
  );
};

export default BackModal;
